<template>
  <el-container ref="container2" :style="`overflow-x:hidden;height:${c1h*0.97}px`">
    <el-scrollbar :class="sidebar.opened?'scroll-expand':'scroll-collapse'">
      <sidebar></sidebar>
    </el-scrollbar>
    <el-main class="loading-mask">
      <el-container ref="container3" >
        <el-header height="auto">
          <navbar></navbar>
        </el-header>
        <el-main ref="main" style="overflow-y: auto">
          <template>
            <el-form>
              <el-row>
                <el-form-item label="1、上传试题">
                </el-form-item>
              </el-row>

              <el-row>
                <el-steps :active="3" direction="vertical" align-center space="80px">
                  <el-step title="步骤1" description="点击左侧“功能列表”，点击“上传”。"></el-step>
                  <el-step title="步骤2" description="在“上传”页面，点击“选择文件”按钮选择docx文件。"></el-step>
                  <el-step title="步骤3" description="待提示“上传试题成功”后在下方表格检查试题是否正确。如果出现错误请修改原docx文件内容并重新上传。"></el-step>
                  <el-step title="步骤4" description="点击表格下方“保存试题”保存已生成的试题。"></el-step>
                </el-steps>
                <el-tag type="danger">保存试题后再次上传并保存试题会让之前保存的试题丢失。</el-tag>
              </el-row>

              <el-row>
                <el-form-item>
                <el-button type="success" size="mini">前往上传</el-button>
                </el-form-item>
              </el-row>


              <el-row>
                <el-form-item label="2、开始做题">
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item>
                <el-tag type="info">判断正误：点击选项后系统会提示正误。</el-tag>
                </el-form-item>
                <el-form-item>
                <el-tag type="info">记录错题：选择错误后该题自动进入错题库。</el-tag>
                </el-form-item>
                <el-form-item>
                <el-tag type="info">下一题/上一题：点击选项下方的“下一题”/“上一题”按钮。</el-tag>
                </el-form-item>
                <el-form-item>
                <el-tag type="info">某一题：在“前往”按钮左侧的输入框输入题号后点击“前往”按钮。</el-tag>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item>
                <el-button type="success" size="mini">前往做题</el-button>
                </el-form-item>
              </el-row>


              <el-row>
                <el-form-item label="3、练习错题">
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item>
                  <el-tag type="info">查看选项：点击题号前的三角形。</el-tag>
                </el-form-item>
                <el-form-item>
                <el-tag type="info">做题：点击对应行的选项。</el-tag>
                </el-form-item>
                <el-form-item>
                <el-tag type="info">删除：点击对应行的“删除”按钮。</el-tag>
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item>
                  <el-button type="success" size="mini">练习错题</el-button>
                </el-form-item>
              </el-row>


              <el-row>
                 <el-form-item label="4、调试">
                </el-form-item>
              </el-row>
              <el-row>
                <el-form-item>
                <el-tag type="info">清除全部数据：点击“清除全部数据”按钮。</el-tag>
                </el-form-item>
                <el-form-item>
                <el-tag type="info">清除错题：点击“清除错题集”按钮。</el-tag>
                </el-form-item>
                <el-form-item>
                <el-tag type="info">重置当前题号：输入题号后点击“重置题号”按钮</el-tag>
                </el-form-item>
              </el-row>

            </el-form>
          </template>
        </el-main>
      </el-container>
    </el-main>
  </el-container>
</template>

<script>
import {
  Topbar,
  Navbar,
  Sidebar,
  AppMain
} from '@/views/layout'

export default {
  name: 'home',
  data () {
    return {
      c1h: 0
    }
  },
  components: {
    Topbar,
    Navbar,
    Sidebar,
    AppMain
  },
  computed: {
    sidebar () {
      return this.$store.state.app.sidebar
    }
  },
  methods: {
    computeContainerSize () {
      var that = this
      var wh = window.innerHeight
      that.c1h = wh

      that.$nextTick(function () {
        var mh = that.$refs.main.$el.clientHeight
        that.$store.dispatch('UpdateMainContainerHeight', mh)
        sessionStorage.setItem('mainContainerHeight', mh)
      })
    }
  },
  mounted () {
    var that = this
    var wh = window.innerHeight
    that.c1h = wh
    window.onresize = function () {
      that.$nextTick(function () {
        that.computeContainerSize()
      })
    }
    this.$nextTick(function () {
      that.computeContainerSize()
    })
  }
}
</script>

<style lang="scss" scoped>
.loading-mask {
  position: relative;
}
.scroll-expand {
    padding-right: 0;
    overflow: initial !important;
    .el-scrollbar__wrap {
      overflow: initial !important;
      overflow-x: hidden;
      .el-scrollbar__view {
          height: 100%;
      }
    }
}
.scroll-collapse {
    padding-right: 15px;
    .el-scrollbar__wrap {
        overflow: inherit !important;
        .el-scrollbar__view {
            height: 100%;
        }
    }
    overflow: initial !important;
}
</style>
